<template>
	 <!-- 顶部区域 -->
       <div id="top">


            <!-- 最顶部的信息导航 -->
            <div class="top_nav">
                <router-link to="/shopcar">
                <i class="iconfont icon-menu" @click="small_nav=!small_nav" title="点击我来打开菜单吧！"></i>
                </router-link>

                    
                   <h1 class="top_nav_h1" to="/firstpage">Carlton</h1>
                  

                <!-- login&Creat -->
                <div class="top_login"> 
                     <span>{{username1}}</span>
                     <a href="javascrpt:;" v-show="this.username1==''?false:true" class="CreateUser" @click="removeItem">登出</a>
                   <router-link to="/login" class="CreateUser" v-show="this.username1==''?true:false"><i class="iconfont icon-denglu"></i>登录</router-link>
                     |  
                     <router-link to="/createUser" class="CreateUser"><i class="iconfont icon-zhuce"></i>注册</router-link>
                </div>


                <!--Logo区域 -->
                <div class="logo">
                     <transition  name="logoshow" >
                     	<router-link to="/firstpage" class="logo_a" title="欢迎看官来到小铺，终于等到您了！" v-show="logoshow"
                        >Carlton</router-link>
                     </transition>
                        
                      
                </div>
                <!-- top底层的导航条 -->
                <div class="top_nav2" >
                    <!--  <span v-for="(i,index) in Second" class="top_nav2_text" >
                     	{{i.tab}}
                     </span> -->
                  <div class="top_nav2_router" @mouseenter="showdown">
		                  	<router-link to="/newComing" class="top_nav2_text newsale">新品到了！<i class="iconfont icon-new1 newComing_icon"></i></router-link>

		                     <router-link to="/logo" class="top_nav2_text">品牌一览<i class="iconfont icon-pinpai"></i></router-link>

		                     <router-link to="/clothe" class="top_nav2_text">衣服<i class="iconfont icon-yifu"></i></router-link>

		                     <router-link to="/shops" class="top_nav2_text">鞋子<i class="iconfont icon-xiezi"></i></router-link>

		                     <router-link to="/bag" class="top_nav2_text">包袋<i class="iconfont icon-baobao"></i></router-link>

		                     <router-link to="/path" class="top_nav2_text">裤子<i class="iconfont icon-kuzi1"></i></router-link>
                  </div>
                     

                     
	                      <!-- 搜索框 -->
                          <search class="search"></search>
                         
                </div>

                
                
                
            </div>
                         
       </div>
</template>

<script>                 
import search from './search.vue'


	export default {
		data() {
             return {
             	actived: 0,
             	logoshow:true,
             	SECONDNAV:false,
                 ssa:true,
                 small_nav:false
             }
		},
		components:{
              search
		},
		methods: {
                    showdown: function() {
                        
                    	this.SECONDNAV = !this.SECONDNAV;
                    	
                    },
                    removeItem:function(){
                         window.localStorage.removeItem('username');
                         this.$store.commit('upDateUserName','');
                    }
		},
		mounted: function() {
             
		},
		computed:{
			 username1() {
				  return this.$store.state.username1
			 }
		}
	}
</script>

<style>
	 #top{
          width: 100%;
          height: 134px;
          background-color: #f4f1e9/*rgba(159,207,183,0.5)*/;
          box-shadow: 0 0 20px rgba(219,216,219,1); 
          line-height: 30px;
          /*font-family: 'SimHei'*/
         
      }
      .top_nav{
      	   width: 100%;
           height: 30px;
      	   background-color:rgba(159,207,183,0.5);
      	    box-shadow: 0 0 20px rgba(219,216,219,1); 
      	    /*position: fixed;*/
      }
      /* 二级导航小面板 */
      .small_nav{
           top: 30px;
           width: 150px;
           height: 200px;
           background: rgba(47, 51, 50, 0.719);
           position: absolute;
           border-bottom-right-radius: 10px;
           z-index: 21;
         
      }
      /*菜单按钮*/
     #top .icon-menu{
          display: inline-block;
          margin-left:10px;
          color: rgba(240,144,144,1);  
          cursor: pointer;
     }
      #top .top_nav_h1{
          color: white;
          display: inline-block;
          font-style: italic;
          font-family: 'Tekton Pro','MS Serif','Lucida Sans Unicode','Arial','SimHei';

      }
      .top_login{
          /* display:inline-block; */
          color: #018C55;
          font-size: 14px;
          float: right;
          margin-right:30px; 
         /* position: relative;*/

      }

      .logo{
      	      display: flex;
              width: 200px;
              height: 70px;
/*              background-color: yellowgreen;*/
              margin:0 auto;
              text-align: center;
              line-height: 70px;
              position: relative;

      }

      .logo_a{
      	    text-decoration: none;
      	    color:#3d4040;
      	    font-size: 40px;
      	    font-weight:700;
      	    transition: all 0.8s;
      	    position: absolute;
      	    font-style: italic;
      	    font-family:'Arial';


      }
      .logo_a:hover{
          color: #eb3d30;
          transform: rotateX(360deg);

      }

      /*top底层的导航条*/
      .top_nav2{
      	width: 100%;
      	height: 30px;
      	/*padding-left: 20px;*/
      	line-height: 30px;
      	background-color: #5dbb9e;
      	float: left;
          position: relative;
          top:1px;
      	padding-left: 20px;
          display: flex;
          justify-content: flex-start;


      }
      /*二级导航面板*/
      .SecondNav{
      	width: 100%;
      	height: 100px;
      	background-color: #e1eecf;
      	position: absolute;
      	text-align: center;
      	z-index: -20;

      }
      .top_nav2_ul{
      	  width: 900px;
      	  height: 30px;
      	  float: left;
      }
       .top_nav2_text{
       	    
       	    width:120px; 
       	    height: 30px;
       	    font-size: 14px;
            border-radius: 8px;
       	    text-decoration: none;
       	    color: white;
       	    display: inline-block;
       	    text-align: center;
       	    font-family:'SimHei';
       	    transition: all 0.3s;
       }
     .top_nav2_text:hover{
     	/*color:rgba(240,144,144,1);*/
     	/* color: /*#f33123*/ 
     	/* border-bottom: 5px solid rgba(240,144,144,1); */
         background:rgba(102, 92, 92, 0.699);
     }
      .top_nav2_router{
      	  display: flex;
          justify-content: flex-start;
          flex-direction: row;
      	  width: 800px;
      	  height: 30px;
         

      }

      /*icon图标*/
      .top_nav2_router .iconfont{
      	color: white;
      }

      .newComing_icon{
      	color: #f44336!important;
      }

   .news{
   	width: 100%;
   	height: 100%;
   	padding:20px; 
   }


   /*二级导航面板过渡*/
 /*  .showdown-enter-active, .showdown-leave-active{
   	transition: all 0.8s;
   }

   .showdown-enter, .showdown-leave-to{
   	opacity: 0;
   	transform: translateY(-100px);
   }*/

   .NavList{
   	width: 100%;
   	height: 100px;
   	text-align: left;
   	text-indent: 30px;
   }


.search{
	float: right;
	position: relative;
	right: -300px;
}

/*中间大logo过渡*/
/*.logoshow-enter-active, .logoshow-leave-active{
	   transition: all 0.8s
}

.logoshow-enter, .logo-leave-to{
	 transform: scaleX(5);
}*/



/*注册组件*/
.CreateUser{
	text-decoration: none;
	color: #018C55;
}


</style>